<template>
    <div>
        <div>
            <el-input size="small" class="addPosInput" placeholder="添加职位" suffix-icon="el-icon-plus" v-model="pos.name"
                @keydown.enter.native="addPosition">
            </el-input>
            <el-button icon="el-icon-plus" size="small" type="primary" @click="addPosition">添加</el-button>
        </div>
        <div class="posManaMain">
            <el-table  stripe border :data="positions" style="width: 70%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="id" label="编号" width="55">
                </el-table-column>
                <el-table-column prop="name" label="职位" width="150">
                </el-table-column>
                <el-table-column prop="createDate" label="创建时间" width="200">
                </el-table-column>
                <el-table-column prop="enabled" label="是否启用" width="150">
                    <template slot-scope="scope">
                    <el-tag v-if="scope.row.enabled" type="success">已启用</el-tag>
                    <el-tag v-else type="danger">未启用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" @click="showEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-button type="danger" size="small" style="margin-top:8px" :disabled="this.multipleSelection.length==0" @click="deleteMany">批量删除</el-button>
        <el-dialog title="编辑职位" :visible.sync="dialogVisible" width="30%">
            <div>
                <table>
                   <tr>
                       <td>
                           <el-tag>职位名称:</el-tag>
                       </td>
                       <td>
                           <el-input v-model="updatePos.name" size="small"
                                     class="updatePosInput"></el-input>
                       </td>
                   </tr>
                   <tr>
                       <td>
                           <el-tag>是否启用:</el-tag>
                       </td>
                       <td>
                           <el-switch
                                   style="margin-left: 10px"
                                   v-model="updatePos.enabled"
                                   active-color="#13ce66"
                                   inactive-color="#ff4949"
                                   active-text="启用"
                                   inactive-text="暂不启用">
                           </el-switch>
                       </td>
                   </tr>
               </table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "PosMana",
    data() {
        return {
            pos: {
                name: ''
            },
            positions: [

            ],
            dialogVisible:false,
            updatePos:{
                name:'',
                enabled:''
            },
            multipleSelection:[]
        }
    },
    methods: {
        //批量删除
        deleteMany(){
            this.$confirm('此操作将永久删除[' + this.multipleSelection.length + ']条职位, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let ids='?';
                this.multipleSelection.forEach(item => {
                    ids+='ids='+item.id+'&'
                });
                this.deleteRequest('/system/basic/pos/' + ids).then(resp => {
                    if (resp) {
                        this.initPositions()
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //获取选中的值
        handleSelectionChange(val){
            this.multipleSelection=val
            
        },
        //修改职位
        doUpdate(){
            this.putRequest('/system/basic/pos/',this.updatePos).then(resp=>{
                if(resp){
                    this.initPositions()
                    this.updatePos.name=''
                    this.dialogVisible=!this.dialogVisible
                }
            })
        },
        //添加职位
        addPosition() {
            if (this.pos.name) {
                this.postRequest('/system/basic/pos/', this.pos).then(resp => {
                    if (resp) {
                        this.initPositions()
                        this.pos.name = ''
                    }
                })
            } else {
                this.$message.error("职位名称不能为空！")
            }
        },
        //弹出修改框
        showEdit(index, data) {
            Object.assign(this.updatePos,data)
            this.updatePos.createDate=''
            this.dialogVisible=!this.dialogVisible
        },
        handleDelete(index, data) {
            this.$confirm('此操作将永久删除[' + data.name + '], 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/system/basic/pos/' + data.id).then(resp => {
                    if (resp) {
                        this.initPositions()
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //初始化
        initPositions() {
            this.getRequest('/system/basic/pos/').then(resp => {
                if (resp) {
                    this.positions = resp
                    console.log(this.positions)
                }
            })
        }
    },
    mounted() {
        this.initPositions();
    }
}
</script>

<style>
.addPosInput {
    width: 300px;
    margin-right: 8px;
}

.posManaMain {
    margin-top: 10px;
}
.updatePosInput{
    width:200px;
}
</style>